<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta name="renderer" content="webkit"/>

    <title>入库操作表单</title>


    <link rel="shortcut icon" href="static/favicon.ico"/>
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet"/>
    <link href="css/font-awesome.min.css?v=4.4.0" rel="stylesheet"/>
    <link href="css/animate.css" rel="stylesheet"/>
    <link href="css/style.css?v=4.1.0" rel="stylesheet"/>



</head>

<script src="js/plugins/layer/laydate1/laydate.js"></script>
<script>


    //执行一个laydate实例
    laydate.render({
        elem: '#plantime' //指定元素
        ,type: 'datetime'
    });
</script>

<body>

<!--<div style="text-align: center;">-->
    <!--<button type="button" class="btn btn-w-m btn-danger">入库操作</button>-->
<!--</div>-->


<div style="margin-left: 5%;">
    <div class="row" style="padding: 20px 0">
        <h3>入库操作</h3>
    </div>
    <form role="form">
        <div class="row form-group">
            <label class="control-label col-lg-2"><span style="color: red">*</span><b>注：</b></label>
            <div class="col-lg-4 col-md-6">
                关联计划单，选择采购目录中相应的配件后,会自动填充名称、分类、规格、数量、计划日期等，之后补全其他项目
            </div>
        </div>
        <div class="row form-group">
            <label class="control-label col-lg-2"><span style="color: red">*</span>关联计划单：</label>
            <div class="col-lg-4 col-md-6">
                    <select class="form-control">
                        <option>北京项目部1月采购计划单</option>
                        <option>北京项目部1月采购计划单</option>
                        <option>北京项目部1月采购计划单</option>
                        <option>北京项目部1月采购计划单</option>
                        <option>北京项目部1月采购计划单</option>
                    </select>
            </div>
        </div>

        <div class="row form-group">
            <label class="control-label col-lg-2">材料类别：</label>
            <div class="col-lg-4 col-md-6">
                氧气、乙炔
                <!--<select class="form-control">-->
                    <!--<option>氧气、乙炔</option>-->
                    <!--<option>二三项材料</option>-->
                    <!--<option>电缆类</option>-->
                    <!--<option>电缆挂钩</option>-->
                    <!--<option>配电箱</option>-->
                <!--</select>-->
            </div>
        </div>
        <div class="row form-group">
            <label class="control-label col-lg-2">名称：</label>
            <div class="col-lg-4 col-md-6">
                氧气
                <!--<select class="form-control">-->
                    <!--<option>氧气</option>-->
                    <!--<option>乙炔</option>-->
                <!--</select>-->
            </div>
        </div>

        <div class="row form-group">
            <label class="control-label col-lg-2">规格型号：</label>
            <div class="col-lg-4 col-md-6">
                千克
                <!--<select class="form-control" >-->
                    <!--<option>千克</option>-->
                    <!--<option>公斤</option>-->
                <!--</select>-->
            </div>
        </div>

        <div class="row form-group">
            <label class="control-label col-lg-2">数量：</label>
            <div class="col-lg-4 col-md-6">
                <!--<input class="form-control" type="text" placeholder="10"/>-->
                10
            </div>
        </div>

        <div class="row form-group">
            <label class="control-label col-lg-2">计划日期：</label>
            <div class="col-lg-4 col-md-6">
                2018-12-30
                <!--<input class="form-control" type="text" id="plantime" placeholder="计划日期"/>-->
            </div>
        </div>
        <div class="row form-group">
            <label class="control-label col-lg-2">单价：</label>
            <div class="col-lg-4 col-md-6">
                1.5
                <!--<input class="form-control" type="text" placeholder="单价"/>-->
            </div>
        </div>
        <div class="row form-group">
            <label class="control-label col-lg-2">金额：</label>
            <div class="col-lg-4 col-md-6">
                15
                <!--<input class="form-control" type="text" placeholder="金额"/>-->
            </div>
        </div>
        <div class="row form-group">
            <label class="control-label col-lg-2"><span style="color: grey">*</span><b>注：</b></label>
            <div class="col-lg-4 col-md-6" style="color:grey;">
                以上是二维码扫描出来的信息,请在下面补全其他信息
            </div>
        </div>
        <div class="row form-group">
            <label class="control-label col-lg-2"><span style="color: red">*</span>采购方式：</label>
            <div class="col-lg-4 col-md-6">
                <input class="form-control" type="text" placeholder="采购方式"/>
            </div>
        </div>
        <div class="row form-group">
            <label class="control-label col-lg-2"><span style="color: red">*</span>供应商：</label>
            <div class="col-lg-4 col-md-6">
                <input class="form-control" type="text" placeholder="供应商"/>
            </div>
        </div>

        <div class="row form-group">
            <label class="control-label col-lg-2"><span style="color: red">*</span>使用部位/用途：</label>
            <div class="col-lg-4 col-md-6">
                <input class="form-control" type="text" placeholder="使用部位/用途"/>
            </div>
        </div>
        <div class="row form-group">
            <label class="control-label col-lg-2">备注：</label>
            <div class="col-lg-4 col-md-6">
                <input class="form-control" type="text" placeholder="备注"/>
            </div>
        </div>

        <div class="row form-group">
            <label class="control-label col-lg-2"><span style="color: red">*</span>照片：</label>
            <div class="col-lg-4 col-md-6">
                <input id="files" type="file" class="form-control" onchange="previewImage(this, 'prvid')"
                       multiple="multiple"/>
                <div id="prvid"></div>
            </div>
        </div>
        <div class="row form-group">
            <div class="col-lg-4 col-md-6">
                <button class="btn btn-w-m btn-success" type="submit">提交并生成二维码</button>
            </div>
        </div>
    </form>

</div>

<script>
    function previewImage(file, prvid) {
        /* file：file控件
        * prvid: 图片预览容器
        */
        var tip = "Expect jpg or png or gif!"; // 设定提示信息
        var filters = {
            "jpeg": "/9j/4",
            "gif": "R0lGOD",
            "png": "iVBORw"
        }
        var prvbox = document.getElementById(prvid);
        prvbox.innerHTML = "";
        if (window.FileReader) { // html5方案
            for (var i = 0, f; f = file.files[i]; i++) {
                var fr = new FileReader();
                fr.onload = function (e) {
                    var src = e.target.result;
                    if (!validateImg(src)) {
                        alert(tip)
                    } else {
                        showPrvImg(src);
                    }
                }
                fr.readAsDataURL(f);
            }
        } else { // 降级处理

            if (!/\.jpg$|\.png$|\.gif$/i.test(file.value)) {
                alert(tip);
            } else {
                showPrvImg(file.value);
            }
        }

        function validateImg(data) {
            var pos = data.indexOf(",") + 1;
            for (var e in filters) {
                if (data.indexOf(filters[e]) === pos) {
                    return e;
                }
            }
            return null;
        }

        function showPrvImg(src) {
            var img = document.createElement("img");
            img.src = src;
            prvbox.appendChild(img);
        }
    }

    //执行一个laydate实例
    laydate.render({
        elem: '#planetime' //指定元素
    });
</script>
</body>
</html>
